<template>
	<!-- <view class="page" :style="{height:windowHeight+'px'}">
		<view class="head">
			<view class="head-item1">
				<view>
					永州 林灵 -> 东莞 麻涌
				</view>
				<view>
					04月17日16:00 - 04月17日18:30
				</view>
			</view>
		</view>
		<view class="pathMsg">
			<text>路线信息</text>
			<view>
				<image src="../../../static/app/register_bg.png"></image>
			</view>
		</view>
		<view class="item">
			<view class="item-msg">
				<text>订单信息</text>
				<text>订单号:453663374525623</text>
			</view>
			<view class="centent">
				<view class="item-content">
					<text>包车用途</text>
					旅游
				</view>
				<view class="item-content">
					<text>总里程</text>
					120km
				</view>
				<view class="item-content">
					<text>乘车人数</text>
					16
				</view>
				<view class="item-content">
					<text>往返类型</text>
					往返
				</view>
			</view>
		</view>
		<view class="mask" v-if="isShow"></view>
		<view class="success" v-if="success">
			<view>
				<image src="../../../static/tick2.png"></image>
			</view>
			<view>抢单成功，请到接单记录里面查看</view>
			<view class="gotoSure" @click="gotoPage('/pages/user/orderRecord/orderRecord')">确定</view>
		</view>
		<view class="success" v-if="fail">
			<view>
				<image src="../../../static/tick3.png"></image>
			</view>
			<view>抢单失败，试试其他的行程吧</view>
			<view class="gotoSure">确定</view>
		</view>
		<view class="item2">
			<view class="item-msg2">
				<text>车座车型</text>
			</view>
			<view class="item2-centent">
				<image src="../../../static/app/register_bg.png"></image>
				<view class="item2-con">
					<view class="item2-Cartype">
						<text>小型客车</text>
						数量1
					</view>
					<view>
						后排可放置行李
					</view>
					<view class="item2-type">经济型</view>
				</view>
			</view>
		</view>
		<view class="item3">
			<text>费用明细</text>
			<view class="item3-con">
				<view class="item3-content">
					<text>司机费用</text>
					<text>由司机自行解决</text>
				</view>
				<view class="item3-content">
					<text>预估行程费用</text>
					<text>&yen 580</text>
				</view>
				<view class="item3-content">
					<text>支付定金</text>
					<view>
						<text class="total">总计</text>
						500
					</view>
				</view>
			</view>
		</view>
		<view class="sure" @click="formData">确定抢单</view>
	</view> -->
	<view class="page" :style="{height:windowHeight+'px'}">
		<view class="address-yy" @click="closeAddress" v-if="addressInfo"></view>
		<view class="address" v-if="addressInfo">
			<view class="close" @click="closeAddress">
				<image src="../../../../static/close.png"></image>
			</view>
			<view class="address-item" v-if="listData.length != 0">
				<view class="dotBox">
					<view class="dot"></view>
				</view>
				<view class="address-item-con">{{listData.star_address.b_name}}</view>
			</view>
			<view class="address-item" v-for="(item,index) of listData.lineInformation" v-if="listData.length != 0">
				<view class="dotBox">
					<view class="dot dotEnd"></view>
				</view>
				<view class="address-item-con">{{item.m_name}}</view>
			</view>
			<view class="address-item address-item-end" v-if="listData.length != 0">
				<view class="dotBox">
					<view class="dot"></view>
				</view>
				<view class="address-item-con">{{listData.end_address.d_name}}</view>
			</view>
		</view>
		<view class="head">
			<view class="head-item">
				<image @click="returnBack" class="return" src="../../../../static/whiBg.png"></image>
				<view class="head-title">订 单 详 情</view>
				<view></view>
			</view>
			<view class="head-item1">
				<view @click="openAddress" class="item-info-add" v-if="listData.length != 0">
					<text class="item-info-add-con">{{listData.star_address.b_name}}</text> -> <text
						class="item-info-add-con">{{listData.end_address.d_name}}</text>
					<!-- {{listData.star_address.b_name}} -> {{listData.end_address.d_name}} -->
				</view>
				<view>
					{{listData.star_time}} - {{listData.end_time}}
				</view>
				<view>
					用车时间：{{listData.days}} 天
				</view>
			</view>
		</view>
		<view class="pathMsg">
			<text class="pathMsg-title">路线信息</text>
			<view>
				<map :scale="map_scale" :longitude="beglongitude" :latitude="beglatitude" :markers="markers" :polyline="polyline">
				</map>
			</view>
		</view>
		<view class="item">
			<view class="item-msg">
				<text class="pathMsg-title">订单信息</text>
				<text>订单号:{{listData.ordernum}}</text>
			</view>
			<view class="centent">
				<view class="item-content" v-for="(item,index) of busUseTab" :key="index"
					v-if="listData.purpose_id ==item.id">
					<text>包车用途</text>
					{{item.purpose_name}}
				</view>
				<view class="item-content">
					<text>总里程</text>
					约{{listData.total_km}}km
				</view>
				<view class="item-content">
					<text>乘车人数</text>
					{{listData.passenger}}
				</view>
				<view class="item-content">
					<text>往返类型</text>
					<view v-if="listData.back_type==1">单程</view>
					<view v-if="listData.back_type==2">往返</view>
				</view>
				<view class="item-content">
					<text>用车数量</text>
					<view>{{listData.car_number}}</view>
				</view>
			</view>
		</view>
		<view class="item-remark"><view class="item-remark-title">客户备注：</view>{{listData.remark}}</view>
		<view class="mask" v-if="isShow"></view>
		<view class="success" v-if="success">
			<view>
				<image src="../../../../static/tick2.png"></image>
			</view>
			<view>抢单成功，请到接单记录里面查看</view>
			<view class="gotoSure" @click="submit()">确定</view>
		</view>
		<view class="success" v-if="fail">
			<view>
				<image src="../../../../static/tick3.png"></image>
			</view>
			<view>抢单失败，试试其他的行程吧</view>
			<!-- @click="gotoPage('/pages/home/home')" -->
			<view class="gotoSure" @click="gotoPage('/pages/home/home')">确定</view>
		</view>
		<!-- <view class="item2">
			<view class="item-msg2">
				<text>车座车型</text>
			</view>
			<view class="item2-centent">
				<image src="../../../static/app/register_bg.png"></image>
				<view class="item2-con">
					<view class="item2-Cartype">
						<text>小型客车</text>
						数量：{{listData.car_num}}
					</view>
					<view>
						后排可放置行李
					</view>
					<view class="item2-type">经济型</view>
				</view>
			</view>
		</view> -->
		<view class="item3">
			<text class="pathMsg-title">费用明细</text>
			<view class="item3-con">
				<view class="item3-content">
					<text>司机费用</text>
					<view class="item3-content-driver" v-if="listData.length != 0">
						<text
							v-if="listData.driver_price.three_meals==0&&listData.driver_price.stay==0&&listData.driver_price.packing==0">由司机自行解决</text>
						<text v-if="listData.driver_price.three_meals==1">包司机三餐 </text>
						<text class="item3-zs" v-if="listData.driver_price.stay==1">包司机住宿 </text>
						<text v-if="listData.driver_price.packing==1">包司机停车位</text>
					</view>
				</view>
				<view class="item3-content">
					<text>本次行程金额</text>
					<text>&yen {{listData.price}}</text>
				</view>
				<view class="item3-content">
					<text>支付定金</text>
					<view>
						<text class="total">总计</text>
						&yen {{listData.front_money}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="tick" @click="msgshow">《注意事项》</view>
		<view class="msgagreem-item" v-if="msgShow">
			<view @click="close">
				<image src="../../../../static/app/close.png"></image>
			</view>
			<view class="msgagreem-title">{{msgagreem.article_title}}</view>
			<view class="msgagreem" v-html="msgagreem.article_content">

			</view>
		</view>
		<view class="sure" @click="formData">安排车辆</view>
		<!-- 没有记录 -->
		<view class="null d-c-c p30" v-if="id == ''">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
		<!-- <uni-load-more v-else :loadingType="loadingType"></uni-load-more> -->
	</view>
</template>

<script>
	import Amap from '../../../../common/lyn4ever-gaode.js';
	export default {
		data() {
			return {
				addressInfo: false,
				isShow: false,
				success: false,
				fail: false,
				windowHeight: '',
				type: '',
				id: '',
				listData: [],
				code: '', //抢单返回的状态
				polyline: [],
				markers: [],
				beglongitude: '', //起点的经度
				beglatitude: '', //起点的纬度
				endlongitude: '', //终点的经度
				endlatitude: '', //终点的纬度
				wayPoiStr: "",
				money: '', //定金与保证金
				payType: '',
				busUseTab: '', //
				msgagreem: '',
				msgShow: false,
				map_scale:'',
			};
		},
		onLoad(e) {
			if (e.select == 1) {
				//this.type = e.type;
				this.id = e.id;
				this.getData();
				this.getbusUseTab();
			}
			// this.getData();
			// this.getbusUseTab();
			if (e.select == 2) {
				//this.type = e.type;
				this.id = e.id;
				//console.log(this.id)
				this.getData();
				this.getbusUseTab();
				// this.payType = e.type;
				// if (this.payType != '' || this.payType == 1) {
				// 	this.isShow = true;
				// 	this.fail = true;
				// }
				// if (this.payType != '' || this.payType == 2) {
				// 	self.isShow = true;
				// 	self.success = true;
				// }
			}
			//console.log(e.formData.car_id)
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			this.getmAgreement();
		},
		methods: {
			/* 协议显示 */
			msgshow() {
				this.msgShow = true;
			},
			close() {
				this.msgShow = false;
			},
			/* 获取协议*/
			getmAgreement() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('plus.article.article/detail', {
						article_id: 10020
					},
					function(res) {
						//console.log(res);
						self.msgagreem = res.data.detail;
						uni.hideLoading();
					});
			},
			/* 获取包车用途的标签 */
			getbusUseTab() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('order.CarOrder/get_purpose', {}, function(res) {
					self.busUseTab = res.data.list;
					uni.hideLoading();
				});
			},
			/* 打开地址详情 */
			openAddress() {
				this.addressInfo = true;
			},
			/* 关闭地址详情 */
			closeAddress() {
				this.addressInfo = false;
			},
			returnBack() {
				uni.navigateBack();
				//return true;
			},
			/* 抢单成功 */
			submit() {
				let self = this;
				uni.showLoading({
					title: '正在提交'
				});
				self._post('order.CarOrder/receiving_orders', {
						id: self.id,
						price: self.listData.cost_price,
					},
					function(res) {
						self.code = res.code;
						self.gotoPage('/pages/user/orderRecord/orderRecord');
						uni.hideLoading();
					});
			},
			formData() {
				let self = this;
				let id = self.id;
				uni.navigateTo({
					url:'/pages/user/orderRecord/arrange_car/arrange_car?select=1&id='+id
				})
				
			},
			/*跳转页面*/
			gotoPage(path) {
				let self = this;
				if (path.startsWith('/')) {
					uni.navigateTo({
						url: path
					});
				} else {
					self[path]();
				}
			},
			/*获取车单数据*/
			getData() {
				let self = this;

				uni.showLoading({
					title: '加载中'
				});
				self._post('order.CarOrder/get_details', {
						id: self.id,
					},
					function(res) {
						//console.log(res);
						self.listData = res.data.info;
						if(self.listData.total_km>1000){
							self.map_scale = 5
						} else if(self.listData.total_km>500&&self.listData.total_km<=1000){
							self.map_scale = 6
						}else if(self.listData.total_km>200&&self.listData.total_km<=500){
							self.map_scale = 6
						}else if(self.listData.total_km >100&&self.listData.total_km<=200){
							self.map_scale = 6.2
						}else if(self.listData.total_km>60&&self.listData.total_km<=100){
							self.map_scale = 7
						}else if(self.listData.total_km>30&&self.listData.total_km<=60){
							self.map_scale = 8
						}else if(self.listData.total_km>20&&self.listData.total_km<=30){
							self.map_scale = 10
						}else if(self.listData.total_km<20){
							self.map_scale = 11
						}
						self.beglongitude = self.listData.star_address.b_longitude;
						self.beglatitude = self.listData.star_address.b_latitude;
						self.endlongitude = self.listData.end_address.d_longitude;
						self.endlatitude = self.listData.end_address.d_latitude;
						self.wayPoiStr = self.listData.waypoistr;
						//self.money = Number(self.listData.front_money) + Number(self.listData.ensure_money)

						var wayPoi = self.beglongitude + "," + self.beglatitude;
						var wayPoiStr = self.wayPoiStr;
						var endPoi = self.endlongitude + "," + self.endlatitude;
						Amap.line(wayPoi, endPoi, wayPoiStr, function(res) {
							self.polyline.push(res)
						});

						Amap.markers(wayPoi, endPoi, wayPoiStr, function(res) {
							self.markers.push.apply(self.markers, res)
						});
						//self.listData = res.data.orderinfo;
						uni.hideLoading();
					});
			},
		}
	}
</script>

<style lang="scss">
	@import 'grab.scss';
</style>
